<template>
	<view class="page home bgf7 c00">
		<image class="w-20 bg" src="../../static/img/bg/home_bg.png"></image>
		<view class="mt10"></view>
		<u-tabs @click="switchTab" :list="tab" lineWidth="42" lineHeight="2" lineColor="#fff"
			:inactiveStyle="{color: '#fff'}" :activeStyle="{color: '#fff'}"
			:itemStyle="{width: 'calc(20% - 22px)',paddingBottom: '5px'}"></u-tabs>


		<scroll-view class="list" @scrolltolower="nextPage" scroll-y
			:style="{height: 'calc(100vh  - ' + statusBar +'px)'}">
			
			
			<view class="flex flexC fs12 cff mt12">
				
				<input class="px10 flex2 bor ml12 r40 py5 cff" type="number"   placeholder="请输入订单号后4位数" 
					v-model="orderNo" placeholder-style="color:#fff">
				<picker mode="date" @change="dateStartChange" >
					<text class=" w100 px12 py7 bor r40 mr10 cff ml20">{{startTime}}</text>
				</picker>
			
				<view class="aliR flex1 fs14 mr20" @click="searchList">
					<text class="bged px12 py7 r40">查询</text>
				</view>
			</view>
			
			<view v-for="(item,index) in list" @click="detail(item)" :key="index"
				class="bgff r2 pt10 pb20 px14 mt12 mx15">
				<view class="flex flexC flexB py10 borb mb6">
					<view class="">订单编号:{{item.order_no_str}}</view>
					<view class="c41 bold6">{{item.status_txt}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">店铺名称</view>
					<view class="">{{item.shop_name}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">台号</view>
					<view class="">{{item.table_name}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">消费者</view>
					<view class="">{{item.user.mobile}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">订单时间</view>
					<view class="">{{item.create_time_txt}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">开始时间</view>
					<view class="">{{item.book_start}}</view>
				</view>
				<view class="flex flexC flexB py6" v-if="item.status != 'doing'">
					<view class="">结束时间</view>
					<view class="">{{item.book_end}}</view>
				</view>
				<view class="flex flexC flexB py6"  v-if="item.status != 'doing'">
					<view class="">订单金额</view>
					<view class="cff0">￥{{item.amount}}</view>
				</view>
				
				<view class="flex flexC flexB py6"  v-if="item.status != 'doing'">
					<view class="">实付金额</view>
					<view class="cff0">{{item.pay_amount}}</view>
				</view>
				<view class="flex flexC flexB py6"  v-if="item.status == 'doing'">
					<view class="">押金</view>
					<view class="cff0">{{item.ya_amount}}</view>
				</view>
				<view class="flex flexC flexE mt10 aliC" v-if="item.status != 'done' || item.status != 'refund' ">
					<text class="flex1"></text>
					<text class="bged r40 w72 py2 mx3" @click.stop="update(item)">更改台桌</text>
					<text class="bgf6 r40 w72 py4 mx3" @click.stop="overOrder(item)">结束订单</text>
				</view>
			</view>
			
		
			
			<uni-popup ref="roomPop" type="bottom">
				<view class="popup-content2">
					<button v-for="room in tableList" class="popup-btn button" @click.stop="setRoom(room)">{{room.name}}</button>
					<view class="popup-btn" @click="$refs.roomPop.close()">取消</view>
				</view>
			
			</uni-popup>


			<uni-popup ref="pop" type="bottom">
				<view class="popup-content2">
					<button class="popup-btn button" @click.stop="doXu(0.5)">半小时</button>
					<button class="popup-btn button" @click.stop="doXu(1)">1小时</button>
					<button class="popup-btn button" @click.stop="doXu(2)">2小时</button>
					<button class="popup-btn button" @click.stop="doXu(3)">3小时</button>

					<view class="popup-btn" @click="$refs.pop.close()">取消</view>
				</view>

			</uni-popup>

			<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2023" />

		</scroll-view>
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";

	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;
	export default {
		components: {
			SimpleDateTimePicker,
		},
		data() {
			return {
				statusBar,
				tab: [{
						name: '全部'
					},
					{
						name: '待消费'
					},
					{
						name: '消费中'
					},
					{
						name: '已完成'
					},
					{
						name: '已退款'
					}
				],
				currentTab: 0,
				page: 1,
				status: '',
				list: [],
				isnodata: false,
				isLastPage: false,
				selectShop: null,
				currentOrderItem: null,
				startTime:'时间选择',
				orderNo:'',
				tableList:[]
			}
		},
		onLoad() {

		},
		onShow() {
			var selectShopStr = uni.getStorageSync("selectShop");
			if (selectShopStr != '') {
				this.list = [];
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.selectShop = JSON.parse(selectShopStr);
				this.getList();
			}
		},
		methods: {
			
			dateStartChange(e){
				this.startTime = e.detail.value;
			},
			
			updateRoom(){
				this.$refs.updatePop.close();
				
			},
		
			
			searchList(){
				if(this.startTime == '时间选择'){
					
					this.startTime = "";
				}
				this.list = [];
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},
			
			setRoom(room){
				this.$refs.roomPop.close();
				
				
				let param = {
					id: room.id,
					order_no:this.currentOrderItem.order_no
				};
				let that = this;
				this.$api.updateOrderTable(param).then(res => {
				
				
					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

            update(item){
				this.currentOrderItem = item;
				let param = {
					shop_id: item.shop_id,
				};
				let that = this;
				this.$api.tableList(param).then(res => {
				
				
					if (res.code == 1) {
						that.tableList = res.data;
						that.$refs.roomPop.open();
					} else {
						
					}
				})
				
			},
		

			handleSubmit(e) {

				var day = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
				console.info(day);

				let param = {
					time: day,
					order_no: this.currentOrderItem.order_no,
				};
				let that = this;
				this.$api.updateOrderBookTime(param).then(res => {


					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
						uni.showToast({
							title: "更改成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			
			overOrder(item){
				let param = {
					order_no: item.order_no,
				};
				let that = this;
				this.$api.tableOverOrder(param).then(res => {
				
				
					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
					
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			doXu(hour) {
				this.$refs.pop.close();
				let param = {
					hour: hour,
					order_no: this.currentOrderItem.order_no,
				};
				let that = this;
				this.$api.sendOrderTime(param).then(res => {


					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
						uni.showToast({
							title: "续时成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			xu(item) {

				this.currentOrderItem = item;
				this.$refs.pop.open();
			},
			openDoor(item, type) {
				let param = {
					type: type,
					room_id: item.room_id,
					order_no: item.order_no
				};
				let that = this;
				this.$api.cmdOpenDoor(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {

					} else {

					}
				})
			},

			detail(item) {
				uni.navigateTo({
					url: '../order/tableDetail?order_no=' + item.order_no
				})
				
			},

			switchTab(e) {


				var name = e.name;
				console.info(JSON.stringify(e))
				if (name == '全部') {
					this.status = ""
				} else if (name == "待消费") {
					this.status = "payed"
				} else if (name == "消费中") {
					this.status = "doing"
				} else if (name == "已完成") {
					this.status = "done"
				} else if (name == '已退款') {
					this.status = "refund"
				}
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				this.list = [];
				this.getList();
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},

			getList() {
				
			
				
				let param = {
					page: this.page,
					shop_id: this.selectShop.id,
					status: this.status,
					orderNo:this.orderNo,
					startTime:this.startTime
				};
				let that = this;
				this.$api.tagleOrderList(param).then(res => {
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.home {
		.my-input-placeholder{
			color:#FFF
		}
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.list,
		.title {
			position: relative;
		}

		.w72 {
			width: 144rpx;
			display: inline-block;
		}
	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>